home *** CD-ROM | disk | FTP | other *** search
/ Enter 2002 November / EnterCD 11_2002.iso / Internet / Amaya 6.4 / Windows NT.exe / _SETUP.1 / creating_graphics_with_the_palette.html < prev    next >
Encoding:
Extensible Markup Language  |  2002-06-11  |  7.1 KB  |  183 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.     
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8.   <meta name="GENERATOR" content="amaya 5.2" />
  9.   <title>Creating Graphics with the Palette</title>
  10.   <style type="text/css">  </style>
  11.   <link href="../style.css" rel="stylesheet" type="text/css" />
  12. </head>
  13.  
  14. <body xml:lang="en" lang="en">
  15.  
  16. <table border="0" summary="toc">
  17.   <tbody>
  18.     <tr>
  19.       <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"
  20.         src="../../images/amaya.gif" /></td>
  21.       <td><p><a href="working_with_graphics.html" accesskey="p"><img alt="previous"
  22.         src="../../images/left.gif" /></a> 
  23.         <a href="../SVG.html" accesskey="t"><img alt="top" src="../../images/up.gif" /></a> 
  24.         <a href="moving_graphics.html" accesskey="n"><img alt="next"
  25.         src="../../images/right.gif" /></a></p>
  26.       </td>
  27.     </tr>
  28.   </tbody>
  29. </table>
  30.  
  31. <div id="page_body">
  32. <h1>Creating Graphics with the Palette</h1>
  33.  
  34. <p>To create a new SVG element in a document, move the insertion point to the
  35. position where you want to insert it, and then click the
  36. <strong>Graphics</strong> button. The <strong>Graphics</strong> button (<img
  37. src="../../images/Graph.gif" alt="Graphics button" />) displays a palette that stays on the screen until you
  38. click <strong>Done</strong> on the palette.</p>
  39.  
  40. <p>The available graphics elements are:</p>
  41. <ul>
  42.   <li>A line, <code>line</code> in SVG, <svg
  43.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  44.       <line y1="3px" x1="0px" x2="17px" y2="20px" style="stroke: #B20000"
  45.             stroke="1"/>
  46.     </svg>
  47.   </li>
  48.   <li>A rectangle, <code>rect</code> in SVG with no <code>rx</code> or
  49.     <code>ry</code> attributes, <svg xmlns="http://www.w3.org/2000/svg"
  50.     width="2cm" height="0.6cm">
  51.       <rect x="6px" width="22px" height="18px"
  52.             style="fill: #FFCB69; stroke: #0071FF" stroke="1"/>
  53.     </svg>
  54.   </li>
  55.   <li>A rectangle with rounded corners, <code>rect</code> in SVG, <svg
  56.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  57.       <rect rx="6px" stroke="1" width="23px" height="18px"
  58.             style="fill: #E5E500; stroke: #4C00E5"/>
  59.     </svg>
  60.   </li>
  61.   <li>A circle, <code>circle</code> in SVG, <svg
  62.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  63.       <circle cy="10px" cx="12px" r="10px"
  64.               style="fill: #C1FFE9; stroke: #FF0000" stroke="1"/>
  65.     </svg>
  66.   </li>
  67.   <li>An ellipse, <code>ellipse</code> in SVG, <svg
  68.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  69.       <ellipse cy="10px" cx="20px" rx="15px" ry="10px" style="fill: #B795FF"
  70.             stroke="1"/>
  71.     </svg>
  72.   </li>
  73.   <li>A polyline, <code>polyline</code> in SVG,<svg
  74.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  75.       <polyline points="4,16 23,0 37,16 55,6" stroke="1"
  76.                 style="stroke: #0000B2; fill: #FFA069"/>
  77.     </svg>
  78.   </li>
  79.   <li>A polygon, <code>polygon</code> in SVG, <svg
  80.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.7cm">
  81.       <polygon points="2,16 15,0 28,12 45,4 46,16 17,16 14,11" stroke="1"
  82.                style="fill: #C8FF95; stroke: #000000"/>
  83.     </svg>
  84.   </li>
  85.   <li>An open curve, <code>path</code> in SVG,<svg
  86.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  87.       <path stroke="blue" fill="none"
  88.             d="M 0,16 C 0,15 4,6 9,7 C 13,7 12,16 16,16 C 20,15 24,1 22,0"
  89.             style="stroke: #0071FF" stroke-width="2px"/>
  90.     </svg>
  91.   </li>
  92.   <li>A closed curve, <code>path</code> in SVG, <svg
  93.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  94.       <path stroke="black" fill="none"
  95.             d="M 14,4 C 11,4 8,0 6,1 C 3,1 1,4 1,7 C 0,9 2,12 5,14 C 7,15 13,14 16,14 C 17,13 21,12 23,11 C 24,9 29,7 29,4 C 28,1 24,0 22,0 C 19,0 16,3 14,4 Z"
  96.             style="fill: #FFE9C1; stroke: #B20000"/>
  97.     </svg>
  98.   </li>
  99. </ul>
  100. <ul>
  101.   <li>An embedded HTML fragment, <code>foreignObject</code> in SVG,<svg
  102.     xmlns="http://www.w3.org/2000/svg" width="6cm" height="45px">
  103.       <rect y="0" x="27px" width="140px" height="45px" style="fill: #C1FFFF"
  104.             stroke="1"/>
  105.       <foreignObject width="140px" y="0" x="20px">
  106.  
  107.         <div xmlns="http://www.w3.org/1999/xhtml">
  108.         <ul>
  109.           <li>First item</li>
  110.           <li>Second item</li>
  111.         </ul>
  112.         </div>
  113.       </foreignObject>
  114.     </svg>
  115.   </li>
  116.   <li>A SVG text, <code>text</code> in SVG<svg
  117.     xmlns="http://www.w3.org/2000/svg" width="9.5cm" height="1.2cm">
  118.       <text y="33px" x="13px"
  119.             style="font-family: helvetica; font-size: 12pt; fill: #0000B2">A
  120.         character string in SVG
  121.       </text>
  122.     </svg>
  123.   </li>
  124. </ul>
  125.  
  126. <h2>Selecting a Shape in the Palette</h2>
  127.  
  128. <p>When you select a shape in the palette and the selection is in the HTML
  129. structure of the document, Amaya creates a new SVG element just at the
  130. beginning of the current selection and inserts the selected shape into this
  131. new SVG. Amaya generates SVG drawings as blocks, between paragraphs. To
  132. display a drawing inline, you must create it between paragraphs then edit the
  133. source code to move it.</p>
  134.  
  135. <p>When the current selected element is a SVG element, the new shape is added
  136. to the current SVG drawing. The new shape is added after and can overlap
  137. previous shapes.</p>
  138.  
  139. <p>The creation of a shape requires direct interaction:</p>
  140. <ul>
  141.   <li>To create a rectangle, you first select the position of the left corner
  142.     by pressing the left mouse button. While holding down the button, move
  143.     the mouse to the position of the opposite corner, then release the
  144.     button. The shape is now defined.
  145.     <p></p>
  146.   </li>
  147.   <li>To create a circle or an ellipse, you first select the position of the
  148.     center by pressing the left mouse button. While holding down the button,
  149.     move the mouse to the right and/or bottom of the shape, then release the
  150.     button. The shape is now defined.
  151.     <p></p>
  152.   </li>
  153.   <li>For a polyline and polygon, enter each point by clicking the
  154.     corresponding position with the left mouse button. To indicate the last
  155.     point, click with the middle or right button.</li>
  156. </ul>
  157.  
  158. <h2>Inserting an Image</h2>
  159.  
  160. <p>You can insert an image within a SVG drawing. Choose
  161. <strong>Image</strong> from the <strong>Types</strong> menu or click the
  162. <strong>Insert Image</strong> button from the button bar and proceed in the
  163. same way as in HTML.</p>
  164.  
  165. <p>To insert a mathematical expression into a SVG drawing, click  the
  166. <strong>Math</strong> palette when the selection is within an SVG. Amaya will
  167. generate a SVG <code>foreignObject</code> to embed the MathML markup.</p>
  168.  
  169. <h2>See Also:</h2>
  170. <ul>
  171.   <li><a href="working_with_graphics.html">Working with Graphics</a></li>
  172.   <li><a href="../Math.html">Editing Mathematics</a></li>
  173.   <li><a
  174.     href="../editing_mathematics/the_math_palette_and_the_types.html">The
  175.     Math Palette and the Types/Math menu</a></li>
  176. </ul>
  177.  
  178. <p>รก</p>
  179. </div>
  180.  
  181. </body>
  182. </html>
  183.